
<template>
  <div>
    <div class="tital">
      <h2>订单列表</h2>
      <button>刷新</button>
    </div>
    <div class="titleLabel">
      <el-button type="primary" plain @click="CXqb">全部订单&nbsp;&nbsp;[{{ this.tableDataAllCount }}]</el-button>
      <el-button type="primary" plain color="white" @click="CXdfk">待付款&nbsp;&nbsp;[{{ status1 }}]</el-button>
      <el-button type="primary" plain color="white" @click="CXdfh">待发货&nbsp;&nbsp;[{{ status2 }}]</el-button>
      <el-button type="primary" plain color="white" @click="CXyfh">已发货&nbsp;&nbsp;[{{ status3 }}]</el-button>
      <el-button type="primary" plain color="white" @click="CXdpj">待评价&nbsp;&nbsp;[{{ status4 }}]</el-button>
      <el-button type="primary" plain color="white" @click="CXywc">已完成&nbsp;&nbsp;[{{ status5 }}]</el-button>
      <el-button type="primary" plain color="white" @click="CXygb">已关闭&nbsp;&nbsp;[{{ status6 }}]</el-button>
    </div>

    <el-collapse style="border: 1px solid #e4e4e4;" v-model="activeNames" class="chaxun">
      <el-collapse-item title="筛选查询" name="1">
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="订单编号">
              <el-input v-model="formInline.aggregateId" placeholder="订单编号"></el-input>
            </el-form-item>
            <el-form-item label="提交时间">
              <el-date-picker v-model="formInline.createTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchStore">提交</el-button>
              <el-button @click="btnclean">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="datalist">
      <div class="datalistTital">
        <div>数据列表</div>
        <el-button type="primary" class="rightsx" @click="BatchConfirm">确认订单
        </el-button>
        <!-- 提示框 -->
        <el-dialog :visible.sync="batchStopVisible" title="提示" width="30%">
          <span>是否确认所选中的全部订单？</span>
          <span slot="footer">
            <el-button type="primary" @click="batchConfirm">是</el-button>
            <el-button @click="batchStopVisible = false">否</el-button>
          </span>
        </el-dialog>
      </div>

      <div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50">
          </el-table-column>
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{ (scope.$index + 1) + (currentPage - 1) * pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="aggregateId" label="订单编号" width="130">
          </el-table-column>
          <el-table-column prop="createTime" label="提交时间" sortable width="200">
          </el-table-column>
          <el-table-column prop="userId" label="用户名" width="150">
          </el-table-column>
          <el-table-column prop="actualTotal" label="订单金额" sortable width="150">
          </el-table-column>
          <el-table-column prop="payType" label="支付方式" width="150">
            <template slot-scope="scope">
              {{ scope.row.payType == '1' ? 'App支付' : '网页支付' }}
            </template>
          </el-table-column>
          <el-table-column prop="source" label="订单来源" width="140">
          </el-table-column>
          <el-table-column prop="status" label="订单状态" width="120">
            <template slot-scope="scope">
              <span effect="dark" v-if="scope.row.status == 1" style="color: #Ff8C6C;">待付款</span>
              <span effect="dark" v-if="scope.row.status == 2" style="color: #66B1FF;">待发货</span>
              <span effect="dark" v-if="scope.row.status == 3" style="color: #F4D473;">待收货</span>
              <span effect="dark" v-if="scope.row.status == 4" style="color: #35CAC3;">待评价</span>
              <span effect="dark" v-if="scope.row.status == 5" style="color: #67C23A;">已完成</span>
              <span effect="dark" v-if="scope.row.status == 6" style="color: #FB5430;">已关闭</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="140">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"><router-link
                  :to="{ path: '/home/Order/OrderPending', query: { aggregateId: scope.row.aggregateId, status: scope.row.status } }">查看</router-link></el-button>
              <el-button type="text" size="small"><router-link
                  :to="{ path: '/home/Order/OrderEditDetail', query: { aggregateId: scope.row.aggregateId, status: scope.row.status } }">编辑</router-link></el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin:20px auto;">
          <el-pagination background align='center' @current-change="handleCurrentChange"
            layout="total, prev, pager, next, jumper" :total="allcount">
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
// import store from '@/store';
// import { getOrderList } from '@/api/order';
import { mapActions, mapGetters, mapState } from 'vuex';


export default {
  name: 'OrderList',
  data() {
    return {
      status1: 0, status2: 0, status3: 0, status4: 0, status5: 0, status6: 0,
      //批量处理
      confirmArr: [], // 存放要确认的数据
      batchStopVisible: false, // 停用提示弹框的状态
      multipleSelection: [],
      ///////
      tableDataAllCount: 0,
      tableData: [],
      allcount: 0,
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      value2: '',
      value3: '',
      activeNames: ['1'],
      formInline: {
        aggregateId: '',
        createTime: ''
      },
    }
  },
  created() {

    this.getList(),
      this.zhuangtai()


  },
  computed: {
  },
  mounted() {
    this.getList()
  },


  methods: {
    ...mapActions('order', ['getOrderListFun', 'btngetCountFun', 'searchStoreInfoTwo', 'batchconfirmOrderFun', 'getstateFun']),
    getList() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;

      this.getOrderListFun({ currentPage, pageSize }).then((res) => {
        // console.log("res", res);
        this.tableData = res.data;
        this.allcount = res.count;
        this.tableDataAllCount = res.count;
      })
    },
    handleClick(row) {
      // console.log(row);
    },
    //筛选
    callback(res) {
      console.log(res);
      this.tableData = res;
      this.allcount = this.tableData.length;
    },
    searchStore() {
      // let obj = {
      let orderId = this.formInline.aggregateId
      let createTime = this.formInline.createTime
      // }
      this.searchStoreInfoTwo([{ orderId, createTime }, this.callback])
    },
    btnclean() {
      location.reload()
      this.formInline.aggregateId = "",
        this.formInline.createTime = ""
    },
    //显示第几页
    handleCurrentChange(val) {
      // console.log(`当前页:${val}`);
      this.currentPage = val
      this.getList()
    },
    //批量处理
    BatchConfirm() {
      this.batchStopVisible = true // 显示弹框
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.confirmArr.push(this.multipleSelection[i])//将拿到的每个对象放入数组
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val//获取选中行的所有数据
    },
    batchConfirm() {
      this.batchStopVisible = false;
      let ids = [];
      this.confirmArr.forEach(item => {
        ids.push(item.aggregateId)
      })
      this.batchconfirmOrderFun({ ids }).then(res => {
        console.log('res', res);
        this.getList();
        this.$message.success('操作成功')
      }).catch((err) => {
        console.log(err);
      })
    },
    //状态筛选
    CXqb() {
      this.getList()
    },
    CXdfk() {
      this.getstateFun({ currentPage: 1, pageSize: 10, status: 1 }).then((res) => {
        this.tableData = res.data;
        this.allcount = res.count
      });
    },
    CXdfh() {
      this.getstateFun({ currentPage: 1, pageSize: 10, status: 2 }).then((res) => {
        this.tableData = res.data;
        this.allcount = res.count
      });
    },
    CXyfh() {
      this.getstateFun({ currentPage: 1, pageSize: 10, status: 3 }).then((res) => {
        this.tableData = res.data;
        this.allcount = res.count
      });
    },
    CXdpj() {
      this.getstateFun({ currentPage: 1, pageSize: 10, status: 4 }).then((res) => {
        this.tableData = res.data;
        this.allcount = res.count
      });
    },
    CXywc() {
      this.getstateFun({ currentPage: 1, pageSize: 10, status: 5 }).then((res) => {
        this.tableData = res.data;
        this.allcount = res.count
      });
    },
    CXygb() {
      this.getstateFun({ currentPage: 1, pageSize: 10, status: 6 }).then((res) => {
        this.tableData = res.data;
        this.allcount = res.count
      });
    },
    zhuangtai() {
      this.btngetCountFun().then((res) => {
        this.status1 = res.data.status1;
        this.status2 = res.data.status2;
        this.status3 = res.data.status3;
        this.status4 = res.data.status4;
        this.status5 = res.data.status5;
        this.status6 = res.data.status6;
      })
    },





  },
}


</script>
<style scoped>
.tital {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
}

.titleLabel button {
  height: 30px;
  padding: 6px 8px;
  margin-right: 20px;
}

.tital button {
  background-color: #1CB09A;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  color: #fff;
  margin-right: 40px;
}

.tital h2 {
  width: 100px;
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1CB09A;
  padding-left: 10px;
  margin-left: 20px;
}

.titleLabel {
  width: 95%;
  margin: 30px auto;
}

.el-tag {
  font-size: 14px;
}

.titleLabel span {
  margin-right: 20px;
}

.titleLabel span:hover {
  cursor: pointer;
}

.chaxun {
  width: 95%;
  margin: 30px auto;
}

::v-deep .el-collapse-item__header {
  font-size: 14px;
}

::v-deep .el-collapse-item__header {
  background-color: #f0f0f0;
  padding-left: 18px;
}

::v-deep .el-collapse-item__wrap {
  padding-left: 20px;
}

::v-deep .el-collapse-item__content {
  padding-top: 30px;
}

.el-form-item {
  margin-right: 50px;
}

.chaxun .el-button {
  margin-left: 30px;
}

.datalist {
  width: 95%;
  margin: 30px auto;
  font-size: 14px;
  background-color: #f0f0f0;
}

.datalistTital {
  height: 50px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 18px;

}

.datalist a {
  color: #409EFF;
  text-decoration: none;
}

.rightsx {
  margin-right: 20px;
  background-color: #1CB09A;
  padding: 0;
  width: 80px;
  height: 32px;
}



::v-deep .rightsx .el-input__inner {
  height: 34px;
  line-height: 34px;
}

::v-deep .el-select {
  width: 130px;
}


::v-deep .el-table {
  margin: 0px auto;
}

::v-deep .el-table .cell {
  text-align: center;
}

.el-pagination {
  white-space: nowrap;
  padding-bottom: 20px;
  color: #303133;
  font-weight: 700;
}
</style>
  